<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>添加付款备注</title>
  <link rel="stylesheet" type="text/css" href="api.css"/>
  <link rel="stylesheet" type="text/css" href="aui.css"/>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3)
    }

    #app {
      width: 100%;
      height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: center;
    }

    .main {
      margin-left: 1.8rem;
      margin-right: 2rem;
      background: white;
      border-radius: 0.35rem;
      font-weight: 500;

    }

    .top .note {
      height: 2rem;
      line-height: 2rem;
      text-align: center;
      margin-left: 5.6rem;
      color: #454647;
      font-size: 0.8rem;
      font-family: Source Han Sans CN;
      font-weight: bold;
      margin-top: 1rem;
      margin-bottom: 2.5rem;
    }

    .top img {
      display: inline-block;
      width: 15px;
      height: 15px;
      margin-left: 0.975rem;
    }

    .type {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 1rem;
      padding-right: 0.8rem;
      height: 1.6rem;
    }

    input[type="number"] {
      flex: 1;
      height: 1.05rem;
      border: 1px solid rgba(153, 153, 153, 1);
      border-radius: 0.1rem;
    }

    .right span {
      color: #999999;
      font-size: 0.8rem;
    }

    .right img {
      width: 0.475rem;
      height: 0.8rem;
    }

    .btn1 {
      padding-top: 0.5rem;
      margin-left: 0.95rem;
      margin-right: 0.775rem;
      padding-bottom: 0.575rem;
      /*height: 1.3rem;*/
      text-align: center;
      line-height: 1.3rem;
      color: #333333;
      font-size: 0.75rem;
      width: 40%;
      float: left;
      border-right: 0.025rem solid #DCDCDC;
      height: 2rem
    }

    .btn2 {
      padding-top: 0.5rem;
      margin-left: 0.95rem;
      margin-right: 0.775rem;
      padding-bottom: 0.575rem;
      /*height: 1.3rem;*/
      text-align: center;
      line-height: 1.3rem;
      color: #F96B47;
      font-size: 0.75rem;
      width: 30%;
      float: left;
      height: 2rem;

    }

    .input_ps {
      width: 12.45rem;
      height: 1.9rem;
      border: 0.0125rem solid #D2D2D2;
      border-radius: 0.1rem;
      margin-bottom: 3.3rem;
      margin-right: 0.6rem;
      margin-left: 0.6rem;

    }

    input::-webkit-input-placeholder {
      font-size: 16px;
    }

  </style>
</head>
<body>
<div id="app">
  <div class="main">
    <div class="top underLine">
      <!--<img src="../../image/close1.png" onclick="closeFrame()">-->
      <span class="note">添加备注</span>
    </div>
    <div class="type">
      <div class="input_ps">
        <input type="text" placeholder="  收款方可见，最多10个字" v-model="note">
      </div>
    </div>
    <div style="width:100%;overflow:hidden;border-top:0.025rem solid #DCDCDC;">
      <div class="btn1" @click='closeFrame()'>取消</div>
      <div class="btn2" @click='btn'>确定</div>
    </div>
  </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/utils.js"></script>
<script src="../../script/vue.min.js"></script>
<script type="text/javascript">
  var vm;
  apiready = function () {
    vm = new Vue({
      el: '#app',
      data: function () {
        return {
          note: ""
        };
      },
      watch: {
        note: function () {
          if (this.note.length > 10) {
            toast("最多10个字");
          }
        }
      },
      methods: {
        // 初始化
        initData: function () {

        },
        // 关闭弹窗
        closeFrame: function () {
          api.closeFrame();
        },
        btn: function () {
          if (this.note.length > 10) {
            toast("最多10个字");
            return false;
          }
          toast('添加付款备注成功')
          //发送
          api.sendEvent({
            name: 'event',
            extra: {key: this.note}
          });
          api.closeFrame();
        },
      },
      created: function () {
        this.initData();
      },

    });

  };


</script>
</html>
